<template>
  <div class="quality-statistics-container" v-loading="loading">
    <div class="left-warp">
      <div class="chart-dom" ref="drawerBarChart"></div>
    </div>
    <div class="right-warp">
      <div class="header">
        <div class="item flex">
          <div class="label">问题总数</div>
          <div class="value">{{ dataSource.totol || 0 }}个</div>
        </div>
        <div class="item flex">
          <div class="label">整改数</div>
          <div class="value">{{ dataSource.dealTotal || 0 }}个</div>
        </div>
      </div>
      <div class="bg"></div>
      <div class="chart-dom" ref="drawerPieChart"></div>
      <div class="text">
        <div class="value">{{ dataSource.closeRate || 0 }}%</div>
        <div class="title">闭合率</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLoginData } from "@/tools";
import { qualityProblemStatistics } from "@/api/wisdom-beam/home";
export default {
  data() {
    return {
      loading: false,
      dataSource: {},
      chartBar: null,
      chartPie: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        let { tenantCode } = getLoginData();
        qualityProblemStatistics({ tenantCode })
          .then((res) => {
            let { data } = res;
            let source = data?.result ?? {};
            this.dataSource = source;

            resolve();
          })
          .catch((_) => {
            this.dataSource = {};
            reject();
          })
          .finally((_) => {
            this.loading = false;
            this.$nextTick(() => {
              this.drawerBarChart();
              this.drawerPieChart();
            });
          });
      });
    },
    //柱状图
    drawerBarChart() {
      let chart_dom = this.$refs["drawerBarChart"];
      this.chartBar = this.$echarts.init(chart_dom);

      let lineWidth = 2;
      let color = "#666666";
      let option = {
        color: ["#62D26C"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 50,
          right: 100,
          itemWidth: 16,
          itemHeight: 8,
        },
        grid: {
          top: 85,
          left: 60,
          bottom: 60,
          right: 40,
        },
        xAxis: {
          data: this.dataSource?.dateList ?? [],
          axisLabel: {
            rotate: 20,
            color: "#666666",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#AAAAAA",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "value",
            nameTextStyle: {
              fontSize: 14,
              color,
              padding: [0, 0, 0, -18],
            },
            axisLabel: {
              color,
              fontSize: 14,
              fontWeight: 400,
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: "#AAAAAA",
              },
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#AAAAAA",
              },
            },
            axisTick: {
              show: false,
            },
            name: "单位：个",
            splitNumber: 1,
          },
          {
            type: "value",
            name: "单位：%",
            nameTextStyle: {
              fontSize: 14,
              color,
              padding: [0, 0, 4, 0],
            },
            axisLabel: {
              color,
              fontSize: 14,
              fontWeight: 400,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#AAAAAA",
              },
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#AAAAAA",
              },
            },
            axisTick: {
              show: false,
            },
            splitNumber: 5,
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "问题数",
            type: "bar",
            barWidth: 14,
            data: this.dataSource?.totalList ?? [],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#BDA1F7" },
                { offset: 1, color: "#7070E3" },
              ]),
            },
          },
          {
            name: "整改数",
            type: "bar",
            barWidth: 14,
            data: this.dataSource?.dealTotalList ?? [],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#317EF2" },
                { offset: 1, color: "#1EC7FF" },
              ]),
            },
          },
          {
            name: "未整改数",
            type: "bar",
            barWidth: 14,
            data: this.dataSource?.notDealTotalList ?? [],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FF7E7E" },
                { offset: 1, color: "#F83131" },
              ]),
            },
          },
          {
            type: "line",
            smooth: false,
            symbolSize: 6,
            lineStyle: {
              width: lineWidth,
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            name: "闭合率",
            yAxisIndex: 1,
            data: this.dataSource?.closeRatelList ?? [],
          },
        ],
      };
      this.chartBar.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.chartBar.resize();
      });
    },
    //饼图
    drawerPieChart() {
      let chart_dom = this.$refs["drawerPieChart"];
      this.chartPie = this.$echarts.init(chart_dom);
      let total = this.dataSource?.totol;
      let dealTotal = this.dataSource?.dealTotal;
      let value = (dealTotal / total) * 100;
      let barMaxWidth = 12;
      let option = {
        angleAxis: {
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          min: 0,
          max: 200,
          startAngle: 180,
        },
        radiusAxis: {
          type: "category",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
          },
          data: [],
        },
        polar: {
          radius: "120%",
          center: ["50%", "77%"],
        },
        series: [
          // 实际值
          {
            type: "bar",
            data: [value],
            z: 1,
            coordinateSystem: "polar",
            barMaxWidth,
            name: "出租率",
            roundCap: 1,
            color: "#62D26C",
            z: 2,
          },
          // 背景图形
          {
            type: "bar",
            data: [100],
            z: 0,
            silent: true,
            coordinateSystem: "polar",
            barMaxWidth,
            roundCap: true,
            color: "#B0C5B6",
            barGap: "-100%",
          },
        ],
      };
      this.chartPie.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.chartPie.resize();
      });
    },
  },
  destroyed() {
    this.chartBar && this.chartBar.dispose();
    this.chartPie && this.chartPie.dispose();
  },
};
</script>

<style lang="less" scoped>
.quality-statistics-container {
  height: 100%;
  width: 100%;
  .flex();
  .left-warp {
    flex-shrink: 0;
    width: 600px;
    height: 100%;
    position: relative;
    .chart-dom {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  }
  .right-warp {
    flex: 1;
    flex-shrink: 0;
    position: relative;
    .header {
      .item {
        font-size: 16px;
        justify-content: center;
        &:nth-child(1) {
          color: #ffa801;
          margin-bottom: 10px;
          margin-top: 80px;
        }
        &:nth-child(2) {
          color: #3ca5ef;
        }
        .label {
          width: 70px;
        }
        .value {
          margin-left: 25px;
        }
      }
    }
    .bg {
      position: absolute;
      width: 214px;
      height: 27px;
      left: 4px;
      bottom: 50px;
      background: url("https://jszhgd.cn/static/pc/beamyard/problem_bg.png");
      background-size: 100% 100%;
    }
    .chart-dom {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .text {
      position: absolute;
      width: 100%;
      left: 0;
      text-align: center;
      top: 180px;
      color: #666666;
      font-size: 14px;
      .value {
        font-size: 24px;
        color: #62d26c;
        margin-bottom: -5px;
      }
    }
  }
}
</style>
